<template>
    <div :class="showType">
        <img :src="imgSrc" alt="">
    </div>
</template>

<script>
export default {
    name: 'mi-Loading',
    props: {
        // 显示类型：embedded 内嵌式类型， barrier 屏障类型
        showType: {
            type: String,
            default: 'embedded'
        },
        // 图片路径
        imgSrc: {
            type: String,
            default: "/imgs/loading-svg/loading-bars.svg"
        }
    },
    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>
    .embedded {
        height: 80px;
        line-height: 80px;
        text-align: center;
        padding: 30px 0;
        img {
            height: 100%;
        }
    }

    .barrier {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #333333a1;
        z-index: 99;
        img {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 15%;
        }
    }
</style>